import React, { Component } from 'react';
import { Icon, Table, Button, Input } from 'semantic-ui-react'
import { connect } from 'react-redux'
import * as actions from '../actions'
import { DateInput } from 'semantic-ui-calendar-react';
import MessageDiv from '../components/Message';
import TableButtonGroup from '../components/TableButtonGroup';

const moment = require('moment');
const mapStateToProps = state => state['actionReport']['actionNoteReport'];

const mapDispatchToProps = dispatch => ({
  
  showActionNoteEditRow: (action, data) => dispatch(actions.actionNote_ShowEditPanel(true)),
  hideActionNoteEditRow: (action, data) => dispatch(actions.actionNote_ShowEditPanel(false)),
  formSubmit: (action, data) => dispatch(actions.actionNote_FormSubmit()),
  formChange: (action, data) => {
    var formData = {};
    formData[data.title] = data.value;
    dispatch(actions.actionNote_FormChange(formData));
  },
  loadActionNotes: (action, data) => {
    let pageIndex = (!!data && !!data.pageIndex) ? data.pageIndex : 0;
    dispatch(actions.actionNote_fetchActionNotes(pageIndex))
  },
  loadActionNote: (action, data) => {
    let id = (action.target.dataset.id) ? action.target.dataset.id : -1;
    dispatch(actions.actionNote_loadActionNote(id))
  },
})

class ActionNotePanel extends Component {

  componentDidMount() {
    this.props.loadActionNotes();
  }

  render() {
    return (
      <div>
        <h4 class='ui header'>
          Action Notes
          <div class='sub header'>
            Simple pagination.
          </div>
        </h4>
        { (!!this.props.message) 
          && 
          <MessageDiv message={this.props.message}/>
        }
        <Table celled size='small' compact color='yellow'>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Note</Table.Cell>
              <Table.Cell>Updated By</Table.Cell>
              <Table.Cell>Create Date</Table.Cell>
              <Table.Cell></Table.Cell>
            </Table.Row>
            { !!this.props.data && this.props.data.map((elem)=> {
                return <Table.Row key={elem.id}>
                  <Table.Cell>{!!elem.note?elem.note:''}</Table.Cell>
                  <Table.Cell>{!!elem.updateBy?elem.updateBy:''}</Table.Cell>
                  <Table.Cell>{!!elem.createDate?(moment.utc(elem.createDate).format("YYYY-MM-DD")):''}</Table.Cell>
                  <Table.Cell><Icon disabled name='edit' link onClick={this.props.loadActionNote} data-id={elem.id}/></Table.Cell>
                </Table.Row>;
              })
            }
            { (!this.props.data || !!this.props.data && this.props.data.length == 0) 
              &&
              <Table.Row key="0">
                <Table.Cell colSpan="5">
                  No Data
                </Table.Cell>
              </Table.Row>
            }
            {
              (this.props.formData.actionNoteForm.status == 'edit')
              &&
              <Table.Row>
                <Table.Cell>
                  <Input fluid size='mini' value={this.props.formData.actionNoteForm.data.note} title='note' placeholder='Action Item' onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                  <Input fluid size='mini' value={this.props.formData.actionNoteForm.data.updateBy} title='updateBy' placeholder='Resp. Person' onChange={this.props.formChange}/>
                </Table.Cell>
                <Table.Cell>
                  <DateInput
                    title='createDate'
                    fluid
                    dateFormat='YYYY-MM-DD'
                    size='mini'
                    value={this.props.formData.actionNoteForm.data.createDate}
                    placeholder='Due Date'
                    onChange={this.props.formChange} />
                </Table.Cell>
              </Table.Row>
            }
          </Table.Body>
          <Table.Footer fullWidth>
            <Table.Row>
              <Table.HeaderCell colSpan='5'>
                { 
                  (this.props.formData.actionNoteForm.status != 'edit') 
                   &&
                  <TableButtonGroup 
                    pageIndex={this.props.pageIndex} 
                    pageLength={this.props.pageLength} 
                    dataCount={this.props.dataCount} 
                    buttonOnClick={this.props.loadActionNotes}/>
                }
                { 
                  (this.props.formData.actionNoteForm.status != 'edit') 
                   &&
                  <Button floated='right' icon labelPosition='left' primary size='mini' onClick={this.props.showActionNoteEditRow}>
                    <Icon name='edit'/> Add Note
                  </Button>
                }
                { 
                  (this.props.formData.actionNoteForm.status == 'edit') 
                    &&
                  <Button floated='right' size='mini' onClick={this.props.hideActionNoteEditRow}>
                    Back
                  </Button>
                }
                { 
                  (this.props.formData.actionNoteForm.status == 'edit') 
                    &&
                  <Button floated='right' size='mini' positive onClick={this.props.formSubmit}>
                    Submit
                  </Button>
                }
                {/*
                { 
                  (this.props.formData.actionNoteForm.status != 'edit') 
                    &&
                  <Button disabled size='mini'>
                    Close All
                  </Button>
                }
                */}
                
              </Table.HeaderCell>
            </Table.Row>
          </Table.Footer>
        </Table>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ActionNotePanel);
